<template>
  <div>
    <div class="site-category">
      <ul class="cat-ul">
        <li class="category-list" v-for="category,index in category" :key="index" @mouseenter="changeShow(index)" @mouseleave="changeShow(999)">
          <a href="#" class="cat-title">
            {{ category.title }}
            <em class="cat-icon iconfont"></em>
          </a>
          <!-- js -->
          <div class="commodity clearfix" :style="active === index ? 'display: block' : 'display: none' ">
            <ul class="com-ul">
              <li class="com-li" v-for="product,index in category.product" :key="index">
                <a href="#" class="link clearfix">
                  <img :src="product.src" alt="" width="40" height="40">
                  <span class="text">{{ product.title }}</span>
                </a>
              </li>
            </ul>
          </div>
        </li>

      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: null,
      category: [
        {
          title: '小米系列',
          product: [
            {
              title: '小米1',
              src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecfbf9d01c8a2605f0a6938093b23ad8.png?thumb=1&w=80&h=80&f=webp&q=90'
            },
            {
              title: '小米2',
              src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecfbf9d01c8a2605f0a6938093b23ad8.png?thumb=1&w=80&h=80&f=webp&q=90'
            }
          ]
        },
        {
          title: '家电',
          product: [
            {
              title: '空调1',
              src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecfbf9d01c8a2605f0a6938093b23ad8.png?thumb=1&w=80&h=80&f=webp&q=90'
            },
            {
              title: '空2',
              src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/630b9e523bb2e1387ce6c7be1edaca18.png?thumb=1&w=80&h=80'
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeShow (index) {
      this.active = index
    }
  }
}
</script>

<style scoped>

.site-category {
  width: 234px;
  height: 460px;
  font-size: 14px;
}

.site-category .category-list .cat-title {
  position: relative;
  display: block;
  height: 42px;
  line-height: 42px;
  padding-left: 30px;
  color: #fff;
}

.site-category .cat-ul {
  height: 420px;
  border: 0;
  color: #fff;
  background: rgba(105, 101, 101, .6);
  padding: 20px 0;
}

.site-category .category-list .cat-icon {
  position: absolute;
  top: 12px;
  right: 20px;
  line-height: 16px;
  font-size: 16px;
}

.site-category .category-list.listBcolor {
  background-color: #ff6700;
}

.site-category .category-list .commodity {
  position: absolute;
  top: 0;
  left: 234px;
  height: 100%;
  background-color: #fff;
  z-index: 99;
}

.site-category .category-list .comm-3 {
  width: 795px;
}

.site-category .category-list .comm-2 {
  width: 530px;
}

.category-list .commodity .com-ul {
  height: 458px;
}

.commodity .com-li {
  width: 265px;
  height: 76px;
  float: left;
}

.commodity .com-li  a {
  display: flex;
  align-items: center;
  margin: 10px;
  color: #000;
}
.commodity .com-li  a img{
  margin-right: 10px;
}
</style>
